<template>
  <div class="modal-container">
    <div class="modal-content">
      <div class="modal-header">
        <span>症状选择</span>
      </div>
      <div class="modal-body">
        <div class="category" v-for="category in symptomList1" :key="category">
          <div class="symptom-container">
            <span class="category-title">{{ category.text }}</span>
            <div class="symptom-container-1">
              <div
                class="symptom"
                v-for="symptom in category.children"
                :key="symptom.text || symptom"
                @click="selectSymptom(symptom,category)"
              >
                <label
                  style="padding: 0 12px; cursor: pointer"
                  :for="`${symptom.text}`"
                  >{{ symptom.text }}</label
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer" >
        <el-button @click="closeDel" type="danger" color="#F3222D">
          <img
            src="@/assets/icon/icon_huitui_nor.svg"
            alt=""
            style="vertical-align: middle"
          />
          <span style="vertical-align: middle; margin-left: 5px">回退</span>
        </el-button>
        <el-button @click="closeModal" type="primary" color="#16ADA4">
          <img
            src="@/assets/icon/icon_close2_nor (1).svg"
            alt=""
            style="vertical-align: middle"
          />
          <span style="vertical-align: middle">关闭</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import store from '@/store';
const useBaseDataStore = store.useBaseDataStore();
// 定义事件
const emits = defineEmits(['onClose', 'onSymptom','onCloseDel']);
const symptomList = defineProps<{ symptomList: any; content?: string }>();
const categories = ref(['耳鼻喉', '肠胃', '胸腹', '皮肤', '月经', '周期']);
const symptomList1 = ref<any[]>([]);
watch(
  () => symptomList.symptomList,
  (val) => {
    symptomList1.value = val.treeList.filter(
      (item: { value: string }) => item.value != 'SP'
    );
    console.log(val);

    const sp = useBaseDataStore
      .getEnumSelect('cycleEnum')
      .map((item: { text: any; value: any }) => ({
        text: item.text,
        value: item.value,
        type: '1',
      }));
    const data = {
      text: '时频',
      value: 'SP',
      children: sp,
    };

    if (val.isCycle == '1') {
      symptomList1.value.push(data);
    }
  },
  { deep: true, immediate: true } // 组件初始化时立即执行一次
);

// 工具：解析 content 字符串为去重的 Set
const parseContentToSet = (val: string | undefined) => {
  if (!val) return new Set<string>();
  return new Set(
    val
      .split(/[，,;；\s]+/) // 支持中英文逗号 / 分号 / 空白分隔
      .map((s) => s.trim())
      .filter(Boolean)
  );
};

// 选中症状集合（多选）——初始根据传入 content 还原
const selectedSymptoms = ref<Set<any>>(new Set());

const isSelected = (symptom: any) => {
  const key = symptom?.text ?? symptom;
  return selectedSymptoms.value.has(key);
};

const closeModal = () => {
  emits('onClose');
};
const closeDel = () => {
  emits('onCloseDel');
};

const selectSymptom = (symptom: any,category: any) => {
  const key = symptom?.text ?? symptom;
  // 切换选中状态
  if (selectedSymptoms.value.has(key)) {
    selectedSymptoms.value.delete(key);
  } else {
    if (symptom.type == 1) {
      const data = {
        text: symptom.text,
        type: '1',
      };
      selectedSymptoms.value.add(data);
    } else {
      selectedSymptoms.value.add(key);
    }
  }
  //console.log(selectedSymptoms.value);

  // 向父组件派发当前全部选中项（如果父层只需要最后一次选择，可改成直接派发 key）
  emits('onSymptom', [symptom],category);
};
</script>

<style lang="scss" scoped>
.modal-container {
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal-content {
  width: 100%;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  padding: 10px;
  background-color: #f0f0f0;
  font-weight: bold;
}

.modal-body {
  padding: 10px 10px 0px 10px;
  height: 350px;
  overflow-y: auto;
}

.category {
  margin-bottom: 10px;

  &-title {
    display: block;
    padding-left: 10px;
    width: 96px;
  }
}

.symptom-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  &-1 {
    display: flex;
    width: calc(100% - 154px);
    flex-wrap: wrap;
    gap: 0px;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    margin-left: 20px;
    padding-bottom: 10px;
  }
}
/* 使用更具体的选择器 */
.modal-body > :last-child {
  .symptom-container-1 {
    border: none;
  }
}
.symptom {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  // 可在此添加 hover 效果, 避免空规则
  &:hover label {
    color: #16ada4;
  }
  input[type='checkbox'] {
    margin-right: 5px;
  }
}

// 选中症状的高亮样式
label.selected {
  color: #16ada4;
  font-weight: 600;
}

.modal-footer {
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #16ada4;
  cursor: pointer;
  background: #f8f9fa;
  .close-btn {
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
